<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>消息提示</title>
    <link rel="stylesheet" type="text/css" href="../common/sui.css">
    <style type="text/css">
        .box {
            width: 500px;
            margin: 50px auto 0;
            padding: 40px 20px;
        }

        .show-msg {
            display: none;
            text-align: center;
            position: fixed;
            height: 35px;
            padding: 0 15px;
            line-height: 35px;
            background-color: rgba(0, 0, 0, 0.8);
            border-radius: 50px;
            color: #fff;
            font-size: 1em;
            z-index: 999;
        }

        .show-msg.default {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .show-msg.success {
            background-color: #43cd6e;
        }

        .show-msg.info {
            background-color: #5bc0de;
        }

        .show-msg.warning {
            background-color: #fac603;
        }

        .show-msg.danger {
            background-color: #ea4a36;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="javascript:;" class="sui-btn" id="top">页面上方</a>
        <a href="javascript:;" class="sui-btn btn-success" id="right">页面右方</a>
        <a href="javascript:;" class="sui-btn btn-warning" id="bottom">页面下方</a>
        <a href="javascript:;" class="sui-btn btn-danger" id="left">页面左方</a>
        <a href="javascript:;" class="sui-btn btn-info" id="center">页面中间</a>
    </div>
</body>
<script type="text/javascript" src="../../common/jquery.min.js"></script>
<script type="text/javascript">
    function showMsg(text = "提示消息", position = "center", style = "default") {
        $(".show-msg").remove();
        $(".show-msg").stop();
        var msg = $('<div></div>');
        msg.addClass('show-msg ' + style);
        msg.text(text);
        $('body').append(msg);

        var marginLeft = -($(msg).outerWidth()) / 2;
        var marginTop = -($(msg).outerHeight()) / 2;

        function msgST(top = "50%", left = "50%", mTop = marginTop, mLeft = marginLeft) {
            $(".show-msg").css({
                "top": top,
                "left": left,
                "margin-top": marginTop,
                "margin-left": marginLeft
            });
        }

        switch (position) {
            case "top":
                msgST("5%", "50%");
                break;
            case "right":
                msgST("50%", "95%");
                break;
            case "bottom":
                msgST("95%", "50%");
                break;
            case "left":
                msgST("50%", "5%");
                break;
            case "center":
                msgST("50%", "50%");
                break;
            default:
                break;
        }
        $('.show-msg').stop().fadeIn(500, function () {
            $('.show-msg').stop().fadeOut(2500);
        });
    }
</script>
<script type="text/javascript">
    $("#top").click(function () {
        showMsg('我是上面', 'top', 'default');
    });
    $("#right").click(function () {
        showMsg('我是右面', 'right', 'success');
    });
    $("#center").click(function () {
        showMsg('我是中间', 'center', 'info');
    });
    $("#bottom").click(function () {
        showMsg('我是下面', 'bottom', 'warning');
    });
    $("#left").click(function () {
        showMsg('我是左面', 'left', 'danger');
    });
</script>

</html>